<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">采集节点基本信息</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        节点名称 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入采集节点名称" v-model="detail.collect_node_name" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        节点编号 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入采集节点编号" v-model="detail.collect_node_no" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        所属小区 :
      </el-col>
      <el-col :span="7">
        <el-select v-model="areaSelected"
          @visible-change="clickAreaSelect"
          @change="changeAreaSelect"
          :loading="loading"
          :disabled="is_disabled"
          placeholder="请选择小区">
          <el-option
            v-for="item in areaList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        所属RTU :
      </el-col>
      <el-col :span="7">
        <el-select v-model="rtuSelected"
          @visible-change="clickRtuSelect"
          :loading="loading"
          :disabled="is_disabled"
          placeholder="请选择RTU">
          <el-option
            v-for="item in rtuList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">采集节点出厂信息</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        采集品牌 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="采集节点品牌" v-model="detail.collect_node_brand" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        制造单位 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="制造单位" v-model="detail.collect_node_company" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        生产日期 :
      </el-col>
      <el-col :span="7">
        <el-date-picker
          :readonly="is_modifly"
          v-model="detail.start_date"
          type="date"
          placeholder="生产日期">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        质保日期 :
      </el-col>
      <el-col :span="7">
        <el-date-picker
          :readonly="is_modifly"
          v-model="detail.exp_date"
          type="date"
          placeholder="质保日期">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">采集节点参数信息</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        节点类型 :
      </el-col>
      <el-col :span="7">
        <el-select 
          :disabled="is_disabled"
          v-model="collectNodeTypeSelected"
          placeholder="请选择采集节点类型">
          <el-option
            v-for="item in Object.keys(collectNodeTypeList)"
            :key="item"
            :label="collectNodeTypeList[item]"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        数据类型 :
      </el-col>
      <el-col :span="7">
        <el-select 
          :disabled="is_disabled"
          v-model="collectTypeSelectd"
          placeholder="请选择数据类型">
          <el-option
            v-for="item in Object.keys(collectTypeList)"
            :key="item"
            :label="collectTypeList[item]"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        节点地址 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入采集节点地址" v-model="detail.collect_node_addr" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        起始地址 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入起始地址" v-model="detail.start_addr" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        寄存器数量 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入寄存器数量" v-model="detail.data_len" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">采集参数状态及备注</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        节点状态 :
      </el-col>
      <el-col :span="7" class="myLineHeight_40px">
        <el-radio-group v-model="detail.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        备注 :
      </el-col>
      <el-col :span="10">
        <el-input placeholder="备注" type="textarea" v-model="detail.extra_desc" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="7" :offset="3">
        <el-button type="primary" class="myBgGreen" v-if="type=='update' && isShow(216)" @click="modify">保 存</el-button>
        <el-button type="primary" class="myBgGreen" v-if="type=='add'" @click="create">新 增</el-button>
        <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myMarginBottom_10px{
    margin-bottom: 20px;
  }
</style>
<script>
  import { getAreaList } from '@/api/area';
  import { getRtuList } from '@/api/rtu';
  import { getCollectNodeDetail, createCollectNode, modifyCollectNode, collectNodeTypeList, collectTypeList } from '@/api/collect_node'
  export default {
    data(){
      return{
        title:"采集节点管理",
        id: null,
        detail: {},

        type: '',
        is_modifly: true,
        is_disabled: false,
        loading: false,

        areaList: [],
        areaLoaded: false,
        areaSelected: null,

        rtuList: [],
        rtuLoaded: false,
        rtuSelected: null,

        collectNodeTypeList: collectNodeTypeList,
        collectNodeTypeSelected: null,
        collectTypeList: collectTypeList,
        collectTypeSelectd: null
      }
    },
    components: {
        
    },
    
    mounted(){
      this.type = this.$route.query.type;
      this.id = this.$route.query.id;

      if(this.type=='update'){ //修改
        this.fetchDetail();
        this.is_modifly = false;
        this.is_disabled = false;
      }

      if(this.type=='add'){
        this.is_modifly = false;
        this.is_disabled = false;
      }

      if(this.type=='info'){ //修改
        this.fetchDetail();
        this.is_modifly = true;  
        this.is_disabled = true;
      }

      
      
    },
    methods:{     
      fetchDetail() {
        let vm = this;
        this.loading = true;

        getCollectNodeDetail(this.id)
        .then(response => {
          vm.detail = response.data;

          vm.areaSelected = vm.detail.area_info.value;
          vm.$set(vm.areaList, 0, vm.detail.area_info);

          vm.rtuSelected = vm.detail.rtu_info.value;
          vm.$set(vm.rtuList, 0, vm.detail.rtu_info);

          vm.collectTypeSelectd = vm.detail.collect_type + '';
          vm.collectNodeTypeSelected = vm.detail.collect_node_type + '';
          vm.loading = false;
        })
        .catch(error => {
          vm.loading = false;
        })
      },  
      clickAreaSelect(val) {
        if (!val) {
          return;
        }

        let vm = this;
        const params = {
          ril: 'S',
          page_num: 1,
          page_size: 999
        };
        if (!this.areaLoaded) {
          getAreaList(params)
          .then(response => {
            vm.areaList = response.data.rows;
            vm.areaLoaded = true;
          })
          .catch(error => {

          })
        }
      },
      changeAreaSelect() {
        this.rtuLoaded = false;
        this.rtuSelected = null;
        this.rtuList = [];
      }, 
      clickRtuSelect(val) {
        if (!val || this.areaSelected == null) {
          return;
        }

        let vm = this;
        const params = {
          ril: 'S',
          page_num: 1,
          page_size: 999
        };
        if (!this.roomLoaded) {
          getRtuList(this.areaSelected, params)
          .then(response => {
            vm.rtuList = response.data.rows;
            vm.rtuLoaded = true;
          })
          .catch(error => {

          })
        }
      },
      changeSelect:function(select){
        this.rtu_id = select;
        console.log(this.rtu_id)
        if(this.rtu_id != -1){
          $(".errorRtu").addClass("hide");
          $(".errorRtu").closest(".col-md-6").find("select").removeClass("errorInput");
        }
      },

      changeSelectjdlx:function(select){
        this.collect_node_type = select;
        if(this.collect_node_type != -1){
          $(".errorJdlx").addClass("hide");
          $(".errorJdlx").closest(".col-md-6").find("select").removeClass("errorInput");
        }
      },

      // changeSelectsjlx:function(select){
      //   this.collect_type = select;
      //   if(this.collect_type != -1){
      //     $(".errorSjlx").addClass("hide");
      //     $(".errorSjlx").closest(".col-md-6").find("select").removeClass("errorInput");
      //   }
      // },
      // changeSelectXq:function(select){
      //   this.area_id = select;
      //   if(this.area_id != -1){
      //     $(".errorXq").addClass("hide");
      //     $(".errorXq").closest(".col-md-6").find("select").removeClass("errorInput");
      //   }
      // },  
      leaderPe:function(e){
        this.status = $(e.currentTarget).find("input").val();

      },
     
      inputFunc:function(e){
        if($.trim($(e.target).val())!=""){
          $(e.target).closest(".col-md-6").find(".errorInfor").addClass("hide");
          $(e.target).closest(".col-md-6").find("input").removeClass("errorInput")          
        }
      },
      isValidate:function(e){
        var res = true;
        if(this.detail.collect_node_name==""){
          $(".errorName").removeClass("hide");
          $(".errorName").closest(".col-md-6").find("input").addClass("errorInput");
          res = false;
        }

        if(this.detail.collect_node_no==""){
          $(".errorNo").removeClass("hide");
          $(".errorNo").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }
       
        if(this.collectTypeSelectd ==""){
          $(".errorJdlx").removeClass("hide");
          $(".errorJdlx").closest(".col-md-6").find("select").addClass("errorInput");         
          res = false;
        }

        if(this.rtuSelected == null){
          $(".errorRtu").removeClass("hide");
          $(".errorRtu").closest(".col-md-6").find("select").addClass("errorInput");         
          res = false;
        }

        if(this.collectNodeTypeSelectd==""){
          $(".errorSjlx").removeClass("hide");
          $(".errorSjlx").closest(".col-md-6").find("select").addClass("errorInput");         
          res = false;
        }

        if(this.detail.start_addr==""){
          $(".errorqsdz").removeClass("hide");
          $(".errorqsdz").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }
       
        return res;
      },
      modify:function(){
        // if(!this.isValidate()){
        //   return;
        // }

        this.detail.rtu_id = this.rtuSelected;
        this.detail.collect_type = this.collectTypeSelectd;
        this.detail.collect_node_type = this.collectNodeTypeSelectd;

        let vm = this;
        this.loading = true;
        modifyCollectNode(this.id, this.detail)
        .then(response => {
          vm.loading = false;
          vm.$router.go(-1);
        })
        .catch(error=> {
          vm.loading = false;
        });
      },
      create:function(){
        // if(!this.isValidate()){
        //   return;
        // }

        this.detail.area_id = this.areaSelected;
        this.detail.rtu_id = this.rtuSelected;
        this.detail.collect_type = this.collectTypeSelectd;
        this.detail.collect_node_type = this.collectNodeTypeSelectd;

        let vm = this;
        this.loading = true;
        createCollectNode(this.detail)
        .then(response => {
          vm.loading = false;
          vm.$router.go(-1);
        })
        .catch(error=> {
          vm.loading = false;
        });
      },
      onBack(){
        this.$router.push({
          path:"/cjjd"
        })
      }

    }
  
  }


</script>



